<script setup>
  import { onMounted } from 'vue'
  import { storeToRefs } from 'pinia'
  import {useProductStore} from '@/stores/productStore'
  import {useCartStore} from '@/stores/cartStore'
  import CartVue from './Cart.vue'

  const productStore = useProductStore()
  const { addToCart } = useCartStore()
  const { products } = storeToRefs(productStore)

  /* onMounted(() => {
    productStore.loadData()
  }) */

</script>

<template>
  <div>
    <h1>产品列表</h1>
    <hr>
    <ul>
      <li
        v-for="product in products"
      >
        商品名称：{{product.name}} - 单价：￥{{product.price}}-数量：{{product.inventory}}
        <button 
          @click="addToCart(product)"
          :disabled="product.inventory <= 0"
        >放入购物车</button>
      </li>
    </ul>
    <hr>
    <CartVue></CartVue>
  </div>
</template>

<style lang="css">
  
</style>
